<template>
  <div class="home">
     <parent ref="f1"></parent>
     <parent1 ref="f2"></parent1>
    <h3>{{age}}</h3>
    <button @click="age++">age++</button>
    <h1>{{name}}</h1>
    <button @click="message = '我是更改后的message'">更改message</button>
    <button @click="name = '李四'">更改姓名</button>
  </div>
</template>

<script>
// @ is an alias to /src
import parent from '@/components/parent.vue' //home和parent是父子关系    home和child是祖孙关系
import parent1 from '@/components/parent1.vue'

export default {
  name: 'HomeView',
  components: {
    parent,
    parent1
  },
  data() {
    return {
        age:18,
        name:'张三',
        message:'我是home页面的数据',
        obj:{
            name:'张三'
        },
        yyds:'2202B的小可爱们',
        msg:'dfghjkldfghj'
    }
  },
//   provide:{
//     age:60
//   }
  provide(){
    return {
        // age:this.age,
        //     name:this.name
        _this:this,
        fn:this.fn,
        message:this.message,
        
    }
  },
  methods: {
    fn(){
        console.log('哈哈哈哈哈')
    },
    yydss(){
        console.log('我会触发吗？？？？');
    }
  },
  mounted() {
    // console.log(this.$children[0].msg)
    console.log(this.$children);
    // console.log(this.$refs.f1);
    // this.msg = this.$refs.f1.msg
    // console.log(this.msg);
    // this.$children[0].parentFn()

  },
//   组件守卫
  beforeRouteEnter (to, from, next) {
    if(localStorage.getItem('token')=='张三'){
       next()
    }else{
        next('/login')
    }
    //   在组件守卫中需要使用data里面的数据 获取methods里面的方法  
    next((vm)=>{
       console.log(vm);//回调参数就是组件的实例
       console.log(vm.msg);
       vm.yydss()
    })
  },

   

}
</script>
